<template>
  <div class="test">
    <div>最后一首歌的名字：{{playlist.currentSongName}}</div>
    <p>当前的播放列表:</p>
    <div>{{playlist.playlist}}</div>

    <!-- 插入分割线 -->
    <hr>

    <button @click="addSongToPlaylist">增加一首歌</button>
    <button @click="replacePlaylist">替换播放列表</button>
    <button @click="clearPlaylist">清空播放列表</button>
  </div>
</template>

<script>
import {  playlistStore } from "../stores/playlist"
export default {
  name: 'AboutView',
  components: {
    
  },
  setup() {
    const playlist = playlistStore();
    playlist.$onAction((({name, store, after}) => {
      // console.log(name, store, after);
      after((result) => {
        console.log('playlistStore改变 name', name)
        console.log('playlistStore改变 result', result);
      })
    }))
    return {
      playlist
    }
  },
  methods: {
    addSongToPlaylist() {
      console.log("addSongToPlaylist");
      // 获取当前歌曲数量
      length = this.playlist.playlist.length + 1 
      // console.log("length:", length);
      let song = {
                    name: 'name' + length ,
                    artist: 'artist' + length,
                    url: 'url' +length + '.mp3',
                    cover: 'cover'+ length+ '.jpg'
                }
      this.playlist.addSongToPlaylist(song);
    },
    replacePlaylist() {
      console.log("replacePlaylist")
      let playlist = [
        {
          name: 'name1',
          artist: 'artist1',
          url: 'url1.mp3',
          cover: 'cover1.jpg'
        },
        {
          name: 'name2',
          artist: 'artist2',
          url: 'url2.mp3',
          cover: 'cover2.jpg'
        },
        {
          name: 'name3',
          artist: 'artist3',
          url: 'url3.mp3',
          cover: 'cover3.jpg'
        }
      ]
      this.playlist.$patch({
        playlist
      })
    },
    clearPlaylist() {
      console.log("clearPlaylist")
      this.playlist.clearPlayList()
      // this.playlist.$reset();
      // this.playlist.clearPlaylist()
    }
  }
}
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
